Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sessions UI: visualization, month/year charts #15902

Draft
wants to merge 25 commits into
base: master
Choose a base branch
from

Conversation

naltatis
Copy link
Member

@naltatis naltatis commented Sep 4, 2024

wip

TODOs

  • header and year navigation
  • add cost, price and co2 chart
  • optimize for mobile
  • add solar percentage month radar chart (in year and total)
  • improve charge history title

@naltatis naltatis added enhancement New feature or request ux User experience/ interface labels Sep 4, 2024
@naltatis naltatis changed the title Ladevorgänge UI: Grafische Auswertung nach Monat und Jahr Sessions UI: visualization, month/year charts Sep 4, 2024
@github-actions github-actions bot added the stale Outdated and ready to close label Sep 11, 2024
@github-actions github-actions bot closed this Sep 16, 2024
@naltatis naltatis removed the stale Outdated and ready to close label Sep 16, 2024
@naltatis naltatis reopened this Sep 16, 2024
@naltatis
Copy link
Member Author

sneak preview

Bildschirmfoto 2024-09-18 um 20 24 10
Bildschirmfoto 2024-09-18 um 20 24 03
Bildschirmfoto 2024-09-18 um 20 16 37
Bildschirmfoto 2024-09-18 um 20 13 28

@andig
Copy link
Member

andig commented Sep 21, 2024

Das sieht richtig genial aus. Bei kurzem Test ist es mir allerdings nicht gelungen, in diesem Branch die "Charging Sessions" zu öffnen- Menüclick tut gar nichts mehr. Console:

TypeError: undefined is not an object (evaluating 'G.overrides.pie.plugins') — 

@VolkerK62
Copy link
Contributor

Vorsichtshalber die Frage:
CSV Download bleibt aber hoffentlich weiterhin erhalten?

@andig
Copy link
Member

andig commented Sep 21, 2024

@VolkerK62 was hat das mit Grafiken zu tun? Nix...

@VolkerK62
Copy link
Contributor

ok, ok. bitte nicht schlagen 😄

@naltatis
Copy link
Member Author

@VolkerK62 klar, CSV gleibt weiterhin da
@andig Ok, da brauch ich mehr Infos. Hast du npm install gemacht?

@andig
Copy link
Member

andig commented Sep 23, 2024

Hast du npm install gemacht?

npm ci

@andig
Copy link
Member

andig commented Sep 23, 2024

Geht weder Safari noch Chrome:

TypeError: Cannot read properties of undefined (reading 'plugins')
    at Sessions-Dy-EagzX.js:16:147609

@martin8310
Copy link

Wunderschön ;-)

@naltatis
Copy link
Member Author

Geht weder Safari noch Chrome:

Merkwürdig. Ich schau mal ob ich das irgendwie reproduziert bekommen.

@StevieC121176
Copy link

Bin begeistert, super gelungen. 👍🤗 ist echt Hammer geworden

@naltatis
Copy link
Member Author

@StevieC121176 das ist ja noch nicht fertig 😄. Da geht noch was.

@naltatis
Copy link
Member Author

Monat/Jahr Navigation

phone month phone month select phone month solar phone year phone total tablet month select tablet year select total vehicles

@StevieC121176
Copy link

Ich würde sagen, da bleiben keine Wünsche offen.

@blenni
Copy link
Contributor

blenni commented Sep 23, 2024

Sieht super aus 👍
Werden die Farben für die Fahrzeuge automatisch vergeben oder kann man das manuell beeinflussen? Wenn manuell, könnte man z.B. das rote Auto in rot und das blaue Auto in blau darstellen, was es noch intuitiver machen würde 😉

@naltatis
Copy link
Member Author

naltatis commented Oct 2, 2024

Kannst du bei Übersicht - Total noch die Maßeinheiten und Spaltenüberschriften hinzufügen?

Hi @maatinh, ich kann den Kommentar noch nicht ganz zuordnen. Welche Maßeinheiten meinst du genau?

@Lako-Unbekannt
Copy link

Kannst du bei Übersicht - Total noch die Maßeinheiten und Spaltenüberschriften hinzufügen?

Hi @maatinh, ich kann den Kommentar noch nicht ganz zuordnen. Welche Maßeinheiten meinst du genau?

Ich glaube er meint in Bild 3 unten die Tabelle.

@naltatis
Copy link
Member Author

naltatis commented Oct 2, 2024

Kannst du bei Übersicht - Total noch die Maßeinheiten und Spaltenüberschriften hinzufügen?

Hi @maatinh, ich kann den Kommentar noch nicht ganz zuordnen. Welche Maßeinheiten meinst du genau?

Ich glaube er meint in Bild 3 unten die Tabelle.

Ah ok, aber die Spaltentitel und Maßeinheiten existieren da ja bereits. Der Header (Zeile 1) ist sticky und damit immer sichtbar. Wir wiederholen die Einheiten bewusst nicht pro Zelle. Aber wenn das nicht klar genug ist oder Verbesserungsideen da sind gerne in einem separaten Issue. In diesem PR bleibt die Tabelle der Ladevorgänge eigentlich unverändert. "Nur" die Visualisierung wird ergänzt.

@naltatis
Copy link
Member Author

naltatis commented Oct 2, 2024

  • added solar month chart (polar line / area)
  • multi year chart
  • add self/grid breakdown for year / total
  • improve sticky headers
  • refactor
  • better tooltips

Bildschirmfoto 2024-10-02 um 18 58 14
Bildschirmfoto 2024-10-02 um 18 57 56
Bildschirmfoto 2024-10-02 um 18 57 04
Bildschirmfoto 2024-10-02 um 18 56 32
Bildschirmfoto 2024-10-02 um 19 05 28
Bildschirmfoto 2024-10-02 um 19 05 03
Bildschirmfoto 2024-10-02 um 19 04 54
Bildschirmfoto 2024-10-02 um 19 01 08
Bildschirmfoto 2024-10-02 um 19 00 45
Bildschirmfoto 2024-10-02 um 19 00 37
Bildschirmfoto 2024-10-02 um 19 00 04
Bildschirmfoto 2024-10-02 um 18 59 49
Bildschirmfoto 2024-10-02 um 18 59 29
Bildschirmfoto 2024-10-02 um 18 58 56
Bildschirmfoto 2024-10-02 um 18 58 30

@naltatis
Copy link
Member Author

naltatis commented Oct 3, 2024

  • better tooltip positioning
  • green years color pallete
Bildschirmfoto 2024-10-03 um 21 08 48 Bildschirmfoto 2024-10-03 um 21 08 36

@maatinh
Copy link
Contributor

maatinh commented Oct 3, 2024

Sieht klasse aus! Eine Frage: Lässt es sich einrichten, dass die einzelnen Ladevorgänge aus der Tabelle eingeklappt sind, so dass nur die Zeile „Insgesamt“ aus Screenshot 5 sichtbar ist?

Schön wäre auch, wenn man die Durchschnittskosten alternativ als €/100km darstellen könnte (bedingt eine Durchschnittsverbrauchsangabe am Fzg).

@andig
Copy link
Member

andig commented Oct 3, 2024

Die runden Ecken der Bar Charts scheint es nur teilweise zu geben. Das sieht etwas inkonsistent aus. Sonst grosses Kino 👍🏻

@naltatis
Copy link
Member Author

naltatis commented Oct 3, 2024

Das mit den runde Ecken bei den stacked bar charts ist leider eine Limitierung von Chart.js. Die Abrundung funktioniert nur beim oberen Element des stacks. Ich mach hier schon einiges an Voodoo dass das in den allermeisten Fällen korrekt dargestellt wird. Immer da wo oben noch eine ganz kleine Lademenge ist klappt das aber nicht. Vielleicht macht's Sinn noch nen Schwellenwert zu definieren unter dem wir diese kleinen Mengen dann einfach wegblenden, aber dann verändern wir die Daten (tooltip und so) nur wegen den runden Ecken. Das ist eigentlich doof.

@naltatis
Copy link
Member Author

naltatis commented Oct 3, 2024

Schön wäre auch, wenn man die Durchschnittskosten alternativ als €/100km darstellen könnte (bedingt eine Durchschnittsverbrauchsangabe am Fzg).

Würde ich aus genau dem genannten Grund nicht machen. Verbräuche sind ja nie konstant und die metrik macht für andere Geräte wenig Sinn. Wir starten erstmal mit ct/kWh.

@naltatis
Copy link
Member Author

naltatis commented Oct 3, 2024

Lässt es sich einrichten, dass die einzelnen Ladevorgänge aus der Tabelle eingeklappt sind, so dass nur die Zeile „Insgesamt“ aus Screenshot 5 sichtbar ist?

@maatinh wie vorher schon geschrieben. Lass uns in diesem PR nicht über die bereits bestehende Tabellenansicht diskutieren. Das wäre für mich eine separate Geschichte.

@maatinh
Copy link
Contributor

maatinh commented Oct 4, 2024

@maatinh wie vorher schon geschrieben. Lass uns in diesem PR nicht über die bereits bestehende Tabellenansicht diskutieren. Das wäre für mich eine separate Geschichte.

Leider hat aber keine der Ansichten eine Zusammenfassung der Kosten ausser in der Tabelle. Ich fände es gut, wenn auch die Gesamtkosten visualisiert wären. Das zeigt doch den Vorteil von EVs und evcc erst richtig deutlich auf gegenüber Verbrennern.
Diese schicken Grafiken werden bestimmt von vielen evcc Nutzern monatlich geteilt werden, da will man bestimmt auch zeigen wie günstig man mit PV+EV+dyn. Stromtarif unterwegs sein kann. Geht mir jedenfalls so.
Die Tabelle ist dafür etwas unübersichtlich finde ich.

@naltatis
Copy link
Member Author

naltatis commented Oct 4, 2024

@maatinh da bin ich bei dir. Gibt ja auch noch ein Todo hier im PR:

add cost, price and co2 chart

@martin8310

This comment was marked as off-topic.

@RTTTC
Copy link
Contributor

RTTTC commented Oct 4, 2024

Schön wäre auch, wenn man die Durchschnittskosten alternativ als €/100km darstellen könnte (bedingt eine Durchschnittsverbrauchsangabe am Fzg).

The problem with this idea: it would only work IF vehicle was only charged at home, and never at work or public chargers.

@maatinh
Copy link
Contributor

maatinh commented Oct 4, 2024

The problem with this idea: it would only work IF vehicle was only charged at home, and never at work or public chargers.

Yeah, it depends if you want to show the total costs of the car or only the costs that you can achieve with charging through evcc.

@naltatis
Copy link
Member Author

naltatis commented Oct 4, 2024

  • add 💰/🌱 selector
  • only offer 🌱 and/or 💰 if data is available

Bildschirmfoto 2024-10-04 um 16 56 07
Bildschirmfoto 2024-10-04 um 16 53 54
Bildschirmfoto 2024-10-04 um 16 53 06
Bildschirmfoto 2024-10-04 um 16 52 24

@naltatis
Copy link
Member Author

  • add avg to 💰🌱

Bildschirmfoto 2024-10-11 um 17 11 16

Bildschirmfoto 2024-10-11 um 17 11 02

Bildschirmfoto 2024-10-11 um 17 10 56

@andig
Copy link
Member

andig commented Oct 12, 2024

Welche Bedeutung haben zeitlicher Verlauf von Ladepreis und Emission? Was bedeutet Preis (im Bild 81€) vs. Kosten?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ux User experience/ interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants